<template>
    <div class="shopSetting">
        <Tabs type="card" @on-click="clickShopTab" active-key="this.$route.query.id" ref="tabs" :value="this.$route.query.name">
            <TabPane :label="item.shopName" v-for="(item,index) in shopList" :key="index" :name="item.id.toString()" @on-click="clickTabPane(item.id)"></TabPane>
        </Tabs>
        <Tabs type="card" class="mt-20">
                     <TabPane label="商城设置" name="商城设置" >
                        <basicSetup :shopIds='shopIds'></basicSetup>
                        <shoppingSet :shopIds='shopIds'></shoppingSet>
                        <noteSet :shopIds='shopIds'></noteSet>
                        <userAgreement :shopIds='shopIds'></userAgreement>
                     </TabPane>
                     <TabPane label="运费模板" name="运费模板">
                        <freightRateList :shopIds='shopIds'></freightRateList>
                     </TabPane>
                     <TabPane label="物流公司" name="物流公司">
                        <logisticsCompany :shopIds='shopIds'></logisticsCompany>
                     </TabPane>
                     <TabPane label="支付设置" name="支付设置">
                        <paymentSettings :shopIds='shopIds'></paymentSettings>
                     </TabPane>
                     <TabPane label="退货原因设置" name="退货原因设置">
                        <salesReturn :shopIds='shopIds'></salesReturn>
                     </TabPane>
                     <TabPane label="退货地址" name="退货地址">
                        <SellerAddress :shopIds='shopIds'></SellerAddress>
                     </TabPane>
                     <!-- <TabPane label="商城人员" name="商城人员">
                        <mallStaff :shopIds='shopIds'></mallStaff>
                     </TabPane> -->
                </Tabs>
    </div>
</template>
<script>
import basicSetup from '@/pages/components/shopModule/basicSetup';
import shoppingSet from '@/pages/components/shopModule/shoppingSet';
import noteSet from '@/pages/components/shopModule/noteSet';
import userAgreement from '@/pages/components/shopModule/userAgreement';
import freightRateList from '@/pages/components/shopModule/freightRateList';
import logisticsCompany from '@/pages/components/shopModule/logisticsCompany';
import salesReturn from '@/pages/components/shopModule/salesReturn';
import SellerAddress from '@/pages/components/shopModule/SellerAddress';
import paymentSettings from '@/pages/components/shopModule/paymentSettings';
import mallStaff from '@/pages/components/shopModule/mallStaff';

export default {
    name: 'shopSetting',
    components: {
        basicSetup,
        shoppingSet,
        noteSet,
        userAgreement,
        freightRateList,
        logisticsCompany,
        salesReturn,
        SellerAddress,
        paymentSettings,
        mallStaff
    },
    data () {
        return {
            shopList: [], // 店铺列表
            shopIds: ''
        };
    },
    updated () {
    },
    mounted () {
        window.innerHeight = 0;
        this.shopIds = this.$route.query.id;
        console.log(this.shopIds, '01010');
        this.shopList = JSON.parse(localStorage.getItem('shopList'));
        // 进入时获取到店铺列表
    },
    created () {
    },
    methods: {
        clickShopTab (name) {
            console.log(name, '是否店铺名称');
            // this.shopIds = this.shopList[index].id;
            this.shopList = JSON.parse(localStorage.getItem('shopList'));
            this.shopList.forEach((item, index) => {
                if (name == item.id.toString()) {
                    this.shopIds = item.id;
                    console.log(item.id, '向子组件船只');
                }
            });
        },
        clickTabPane (id) {
            console.log(id, 'tabpane点击事件能触发么');
        }
    },
    watch: {
        shopIds (newVal, oldVal) {
            if (newVal) {
                this.shopId = newVal;
            }
            console.log(this.shopId, 'ppp');
        }
    }
};
</script>
<style lang="less" scoped>
    .shopSetting{ 
        /deep/.ivu-tabs-tabpane{
            width: 100% !important;
        }
        /deep/.ivu-card-bordered{
            // padding: 0 100px;
        }
    }
    .colorFFF{
        color: #fff;
    }
</style>
